<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>border</title>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="style/style.css" media="all"></link>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="style/SyntaxHighlighter.css" media="all"></link>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="style/grid.debug.css" media="all"></link>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/jquery.extgrid.js"></script>
<script type="text/javascript" src="js/SyntaxHighlighter.js"></script>
</head>
<body>
<style type="text/css">
.grid-border-x { border:2px solid red;}
.grid-border-x2 { border:2px solid red; border-left:none; border-right:none;}
</style>
<div id="content">
	<h2>Grid边框:border</h2>
	<div class="delta">
		<strong>默认为true | false 无边框</strong><br>
		关联属性:<br>
			1.containerCss 当为true时 启用<br>
			2.leftBorder,rightBorder,topBorder,bottomBorder 的值是containerCss(border:1px solid #95B8E7;) 中设置的CSS 边框大小(系统默认是1)
		<br><strong>
		注:
		border为true时 , containerCss才启用
		</strong>
	</div>
	<div id="demo" style="margin-top:5px;">
		<div id="demo1" class="demo" style="height:150px;"></div>
		<div style="height:10px;"></div>
		<div id="demo2" class="demo" style="height:150px;"></div>
		<div style="height:10px;"></div>
		<div id="demo3" class="demo" style="height:150px;"></div>
		<div style="height:10px;"></div>
		<div id="demo4" class="demo" style="height:150px;"></div>
	</div>
	<div class="delta dotte">
		<strong>CSS</strong>
		<pre name="code" class="css">
.grid-border-x { border:2px solid red;}
.grid-border-x2 { border:2px solid red; border-left:none; border-right:none;}
		</pre>
		<strong>HTML:</strong>
		<pre name="code" class="html">
<div id="demo1" class="demo" style="height:150px;"></div>
<div style="height:10px;"></div>
<div id="demo2" class="demo" style="height:150px;"></div>
<div style="height:10px;"></div>
<div id="demo3" class="demo" style="height:150px;"></div>
<div style="height:10px;"></div>
<div id="demo4" class="demo" style="height:150px;"></div>
		</pre>
		<strong>Script:</strong>
		<pre name="code" class="javascript">
var data = [
	{id:1,title:'test1',content:'内容1',path:'base1.html'},
	{id:2,title:'test2',content:'内容2',path:'base2.html'},
	{id:3,title:'test3',content:'内容3',path:'base3.html'},
	{id:4,title:'test4',content:'内容4',path:'base4.html'}
];

//cfg 建议写在函数里
function getCfg(){
	var columns = [
		{field:'id',title:'ID',width:30,fitColumn:false},
		{field:'title',title:'标题',width:60},
		{field:'content',title:'内容',width:200},
		{field:'path',title:'文件名',width:100}
	];
	var options = {
		title : 'gird带边框',
		data : data,
		columns : columns
	}
	return options;
}
var grid1,grid2,grid3,grid4;
function create(){
	var opt1 = getCfg();
	grid1 = $("#demo1").extgrid(opt1);
	
	var opt2 = getCfg();
	opt2.title="gird不带边框";
	opt2.border=false;
	grid2 = $("#demo2").extgrid(opt2);
	
	var opt3 = getCfg();
	opt3.title="gird自定义边框大小";
	opt3.border=true;
	opt3.containerCss="grid-border-x";
	opt3.leftBorder=2;
	opt3.rightBorder=2;
	opt3.topBorder=2;
	opt3.bottomBorder=2;
	grid3 = $("#demo3").extgrid(opt3);
	
	var opt4 = getCfg();
	opt4.title="gird自定义边框大小(上下带边框)";
	opt4.border=true;
	opt4.containerCss="grid-border-x2";
	opt4.leftBorder=0;
	opt4.rightBorder=0;
	opt4.topBorder=2;
	opt4.bottomBorder=2;
	grid4 = $("#demo4").extgrid(opt4);
}
$(function(){
	create();
});
		</pre>
	</div>
</div>
<script type="text/javascript">
var data = [
	{id:1,title:'test1',content:'内容1',path:'base1.html'},
	{id:2,title:'test2',content:'内容2',path:'base2.html'},
	{id:3,title:'test3',content:'内容3',path:'base3.html'},
	{id:4,title:'test4',content:'内容4',path:'base4.html'}
];


function getCfg(){
	var columns = [
		{field:'id',title:'ID',width:30,fitColumn:false},
		{field:'title',title:'标题',width:60},
		{field:'content',title:'内容',width:200},
		{field:'path',title:'文件名',width:100}
	];
	var options = {
		title : 'gird带边框',
		data : data,
		columns : columns
	}
	return options;
}
var grid1,grid2,grid3,grid4;
function create(){
	var opt1 = getCfg();
	grid1 = $("#demo1").extgrid(opt1);
	
	var opt2 = getCfg();
	opt2.title="gird不带边框";
	opt2.border=false;
	grid2 = $("#demo2").extgrid(opt2);
	
	var opt3 = getCfg();
	opt3.title="gird自定义边框大小";
	opt3.border=true;
	opt3.containerCss="grid-border-x";
	opt3.leftBorder=2;
	opt3.rightBorder=2;
	opt3.topBorder=2;
	opt3.bottomBorder=2;
	grid3 = $("#demo3").extgrid(opt3);
	
	var opt4 = getCfg();
	opt4.title="gird自定义边框大小(上下带边框)";
	opt4.border=true;
	opt4.containerCss="grid-border-x2";
	opt4.leftBorder=0;
	opt4.rightBorder=0;
	opt4.topBorder=2;
	opt4.bottomBorder=2;
	grid4 = $("#demo4").extgrid(opt4);
}
$(function(){
	create();
});
$(window).ready(function(){
	dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
});
</script>
</body>
</html>